<template>
  <Card title="资源可用性查询" :bordered="false">
    <!-- 查询表单 -->
    <Form layout="inline" style="margin-bottom: 16px">
      <FormItem label="资源类型">
        <Select
          v-model:value="queryForm.resourceType"
          placeholder="请选择资源类型"
          style="width: 120px"
          :options="resourceTypeOptions"
        />
      </FormItem>
      <FormItem label="业务类型">
        <Select
          v-model:value="queryForm.businessType"
          placeholder="请选择业务类型"
          style="width: 120px"
          :options="businessTypeOptions"
        />
      </FormItem>
      <FormItem label="日期">
        <DatePicker
          v-model:value="queryForm.date"
          placeholder="选择日期"
          style="width: 120px"
        />
      </FormItem>
      <FormItem label="时间">
        <TimePicker
          v-model:value="queryForm.startTime"
          placeholder="开始时间"
          style="width: 100px"
        />
        <span style="margin: 0 8px">-</span>
        <TimePicker
          v-model:value="queryForm.endTime"
          placeholder="结束时间"
          style="width: 100px"
        />
      </FormItem>
      <FormItem label="容量">
        <Input
          v-model:value="queryForm.capacity"
          placeholder="最小容量"
          style="width: 80px"
          type="number"
        />
      </FormItem>
      <FormItem label="关键词">
        <Input
          v-model:value="queryForm.keyword"
          placeholder="资源名称"
          style="width: 120px"
        />
      </FormItem>
      <FormItem>
        <Space>
          <Button type="primary" @click="queryAvailability" :loading="loading">
            <IconifyIcon icon="mdi:magnify" />
            查询
          </Button>
          <Button @click="resetQuery">重置</Button>
        </Space>
      </FormItem>
    </Form>

    <!-- 查询结果 -->
    <div v-if="queryResults.length > 0">
      <div class="result-header">
        <h4>查询结果 ({{ queryResults.length }} 项)</h4>
      </div>
      <Table
        :columns="columns"
        :data-source="queryResults"
        :loading="loading"
        :pagination="false"
        size="small"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'type'">
            <Tag :color="getResourceTypeColor(record.type)">
              {{ getResourceTypeLabel(record.type) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'status'">
            <Tag :color="getStatusColor(record.status)">
              {{ getStatusLabel(record.status) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <Space>
              <Button
                type="link"
                size="small"
                @click="bookResource(record)"
                :disabled="record.status !== 'AVAILABLE'"
              >
                预约
              </Button>
              <Button type="link" size="small"> 详情 </Button>
            </Space>
          </template>
        </template>
      </Table>
    </div>

    <!-- 空状态 -->
    <div v-else-if="!loading" class="empty-state">
      <IconifyIcon icon="mdi:magnify" size="48" />
      <p>请输入查询条件并点击查询按钮</p>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import {
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  FormItem,
  Input,
  Row,
  Select,
  SelectOption,
  Space,
  Table,
  Tag,
  TimePicker,
} from 'ant-design-vue';

const loading = ref(false);
const queryResults = ref<any[]>([]);

const queryForm = reactive({
  resourceType: '',
  businessType: '',
  date: '',
  startTime: '',
  endTime: '',
  capacity: 1,
  keyword: '',
});

// 资源类型选项
const resourceTypeOptions = [
  { label: '房间', value: 'ROOM' },
  { label: '设备', value: 'EQUIPMENT' },
  { label: '场地', value: 'VENUE' },
  { label: '车辆', value: 'VEHICLE' },
  { label: '人员', value: 'PERSONNEL' },
];

// 业务类型选项
const businessTypeOptions = [
  { label: '酒店', value: 'HOTEL' },
  { label: '公寓', value: 'APARTMENT' },
  { label: '温泉洗浴', value: 'HOT_SPRING' },
  { label: '餐饮', value: 'RESTAURANT' },
  { label: '宠物医疗', value: 'PET_MEDICAL' },
  { label: '医美', value: 'MEDICAL_BEAUTY' },
  { label: '培训班', value: 'TRAINING' },
];

// 表格列定义
const columns = [
  {
    title: '资源名称',
    dataIndex: 'name',
    key: 'name',
    width: 150,
  },
  {
    title: '资源类型',
    dataIndex: 'type',
    key: 'type',
    width: 100,
  },
  {
    title: '容量',
    dataIndex: 'capacity',
    key: 'capacity',
    width: 80,
  },
  {
    title: '可用时间',
    dataIndex: 'availableTime',
    key: 'availableTime',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
  },
];

// 查询可用性
const queryAvailability = async () => {
  loading.value = true;
  try {
    // 模拟查询结果
    const mockResults = [
      {
        id: '1',
        name: '会议室A',
        type: 'VENUE',
        capacity: 20,
        availableTime: '09:00-18:00',
        status: 'AVAILABLE',
        location: '1楼',
        price: 200,
      },
      {
        id: '2',
        name: '标准客房101',
        type: 'ROOM',
        capacity: 2,
        availableTime: '14:00-12:00',
        status: 'AVAILABLE',
        location: '1楼',
        price: 300,
      },
      {
        id: '3',
        name: '投影设备',
        type: 'EQUIPMENT',
        capacity: 1,
        availableTime: '全天',
        status: 'AVAILABLE',
        location: '设备间',
        price: 50,
      },
      {
        id: '4',
        name: '按摩师张师傅',
        type: 'PERSONNEL',
        capacity: 1,
        availableTime: '10:00-22:00',
        status: 'AVAILABLE',
        location: '温泉区',
        price: 100,
      },
    ];

    queryResults.value = mockResults;
  } catch (error) {
    console.error('查询失败:', error);
  } finally {
    loading.value = false;
  }
};

// 重置查询
const resetQuery = () => {
  Object.assign(queryForm, {
    resourceType: '',
    businessType: '',
    date: '',
    startTime: '',
    endTime: '',
    capacity: 1,
    keyword: '',
  });
  queryResults.value = [];
};

// 预约资源
const bookResource = (resource: any) => {
  console.log('预约资源:', resource);
  // 这里可以打开预约表单
};

// 辅助函数
const getResourceTypeColor = (type: string) => {
  const colors = {
    ROOM: 'blue',
    EQUIPMENT: 'green',
    VENUE: 'orange',
    VEHICLE: 'purple',
    PERSONNEL: 'cyan',
  };
  return colors[type] || 'default';
};

const getResourceTypeLabel = (type: string) => {
  const labels = {
    ROOM: '房间',
    EQUIPMENT: '设备',
    VENUE: '场地',
    VEHICLE: '车辆',
    PERSONNEL: '人员',
  };
  return labels[type] || type;
};

const getStatusColor = (status: string) => {
  const colors = {
    AVAILABLE: 'green',
    OCCUPIED: 'red',
    MAINTENANCE: 'orange',
    RESERVED: 'blue',
  };
  return colors[status] || 'default';
};

const getStatusLabel = (status: string) => {
  const labels = {
    AVAILABLE: '可用',
    OCCUPIED: '占用',
    MAINTENANCE: '维护',
    RESERVED: '已预约',
  };
  return labels[status] || status;
};
</script>

<style scoped>
.result-header {
  margin-bottom: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.result-header h4 {
  margin: 0;
  color: #1890ff;
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: #999;
}

.empty-state p {
  margin-top: 16px;
  font-size: 14px;
}
</style>
